

<template>
  <el-card>
    <el-form :inline="true" :model="qureyData" ref="from">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form-item label="学科名称">
            <el-input
              size="small"
              v-model="qureyData.subjectName"
              style="width: 180px"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="small" @click="reset">清除</el-button>
            <el-button size="small" type="primary" @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>

        <el-form-item>
          <el-button @click="btnOK" size="small" type="success"
            ><i class="el-icon-edit"></i><span>新增学科</span></el-button
          >
        </el-form-item>
      </el-row>
    </el-form>

    <page-tools :text="`数据一共${counts}条`"></page-tools>

    <!-- 表单 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"> </el-table-column>

      <el-table-column prop="subjectName" label="学科名称" width="100">
      </el-table-column>
      <el-table-column prop="username" label="创建者" width="120">
      </el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="180">
        <template slot-scope="{ row }">
          <span>{{ $dayJs(row.addDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isFrontDisplay" label="前台是否显示" width="150">
        <template slot-scope="{ row }">
          {{ row.isFrontDisplay === 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="twoLevelDirectory" label="二级目录" width="140">
      </el-table-column>
      <el-table-column prop="tags" label="标签" width="140"> </el-table-column>
      <el-table-column prop="totals" label="题目数量" width="140">
      </el-table-column>
      <el-table-column label="操作" sortable="" fixed="right" width="150">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="small"
            @click="urlFn(row.id, row.subjectName)"
            >学科分类</el-button
          >
          <el-button type="text" size="small" @click="urlFtn(row.id)"
            >学科标签</el-button
          >
          <el-button type="text" size="small" @click="editSub(row.id)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delSub(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="qureyData.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="qureyData.pagesize"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
      >
      </el-pagination>
    </el-row>
    <addSub ref="from" @btnK="butK"></addSub>
  </el-card>
</template>

<script>
import { subjectList, subjectApi, delsubjectApi } from "@/api/subject";
import addSub from "./components/addSub";
export default {
  name: "ListPage",
  components: { addSub },
  data() {
    return {
      qureyData: {
        subjectName: "",
        page: 1,
        pagesize: 10,
      },

      list: [],
      counts: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let { counts, items } = await subjectList(this.qureyData);
      console.log(counts, items);
      this.counts = counts;
      this.list = items;
    },
    urlFn(id, name) {
      console.log(id);
      this.$router.push({
        query: {
          id: id,
          name: name,
        },
        path: "/subjects/directorys",
      });
    },

    urlFtn(id, name) {
      this.$router.push({
        query: {
          id: id,
          name: name,
        },
        path: "/subjects/tags",
      });
    },

    handleSizeChange(val) {
      this.qureyData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.qureyData.page = val;
      this.initData();
    },

    search() {
      this.initData();
    },
    reset() {
      this.qureyData = {};
      this.initData();
    },
    btnOK() {
      this.$refs.from.dialogVisible = true;
    },
    butK() {
      this.initData();
    },

    async editSub(id) {
      this.$refs.from.dialogVisible = true;
      let data = await subjectApi(id);
      console.log(data);
      this.$refs.from.formData = data;
      this.$refs.from.formData.isFrontDisplay = String(
        this.$refs.from.formData.isFrontDisplay
      );
    },

    async delSub(id) {
      await this.$confirm("确认删除吗");
      await delsubjectApi(id);
      this.$message.success("删除成功");
      if (this.qureyData.page > 1 && this.list.length === 1) {
        this.qureyData.page--;
      }
      this.initData();
    },
  },
};
</script>

<style>
.bot {
  margin-left: 27px;
}
</style>
